import React, { Component } from 'react'
import axios from "axios"
import Procss from "../scss/Product.module.scss"
import { Carousel, WingBlank } from 'antd-mobile';
/* 导入仓库 */
import store from '../store';
import { getgooddetail } from "../store/actionCreate/getgoodlist"
/* 1. 引入一个连接器 connect */
import { connect } from "react-redux"

class Goodsdetails extends Component {
    state = {
        good: {},
        data: ['1', '2', '3'],
        imgHeight: 176
    }
    componentDidMount() {
        // console.log(this.props.match.params.goodid);
        store.dispatch(getgooddetail(this.props.match.params.goodid))
    }
    backTohome = () => {
        window.history.back()
    }
    Topay = (pid) => {
        // 1. 进行路由跳转
        this.props.history.push("/pay/" + pid);
    }
    render() {
        return (
            <div className={Procss.product}>
                {/* 主页头部 */}
                <div className={Procss.ProHeader}>
                    <div className={Procss.ProHeaderLef} onClick={this.backTohome}><span className="iconfont proback">&#xe66e;</span></div>
                    <div className={Procss.ProHeaderCen}>商品详情</div>
                    <div className={Procss.ProHeaderRig}><span className="iconfont"></span></div>
                </div>
                {/* 主体部分 */}
                <div className={Procss.ProBody}>
                    <div className="banner">
                        {this.props.message.pics ? (
                            <Carousel
                                autoplay={false}
                                infinite
                                beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                                afterChange={index => console.log('slide to', index)}
                                className=""

                            >
                                { this.props.message.pics.map(val => (
                                    <a
                                        key={val.pics_id}
                                        href="http://www.alipay.com"
                                        style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                                    >
                                        <img
                                            src={val.pics_mid}
                                            alt=""
                                            style={{ width: '100%', verticalAlign: 'top' }}
                                            onLoad={() => {
                                                // fire window resize event to change height
                                                window.dispatchEvent(new Event('resize'));
                                                this.setState({ imgHeight: 'auto' });
                                            }}
                                        />

                                    </a>

                                )) || null}
                            </Carousel>
                        ) : (<img
                            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2858426577,4189650377&fm=26&gp=0.jpg"
                            alt=""
                            style={{ width: '100%', verticalAlign: 'top' }}
                            onLoad={() => {
                                // fire window resize event to change height
                                window.dispatchEvent(new Event('resize'));
                                this.setState({ imgHeight: 'auto' });
                            }}
                        />)}
                    </div>
                    <div className="gddetailprice">
                        <div className="gddetailpricelef">￥{this.props.message.goods_price}</div>
                        <div className="gddetailpricerig"><span>☆</span></div>
                    </div>
                    <div className="gddetailTitle">
                        {this.props.message.goods_name}
                    </div>
                    <div className="gddetailTro" dangerouslySetInnerHTML={{ __html: this.props.message.goods_introduce }}></div>
                </div>
                {/* 底部 */}
                <div className={Procss.ProFoot}>
                    <div className={Procss.ProCart}> <span className="iconfont">&#xe63e;</span> <i>2</i></div>
                    <div className={Procss.ProBuynow} onClick={this.Topay.bind(this, this.props.match.params.goodid)}>立即购买</div>
                    <div className={Procss.ProAddcart}>加入购物车</div>
                </div>

            </div>
        )
    }

}

const mapStateToProps = (state) => {
    return {
        message: state.goodsdetailsreducer.message,
        test: state.goodsdetailsreducer.test
    }
}

export default connect(mapStateToProps, null)(Goodsdetails);
